<template>
    <el-form :inline="true" :model="center" class="demo-form-inline" style="margin: 20px auto 0;width:1200px">
        <el-form-item label="经度">
            <el-input v-model="center.lng" placeholder="经度" style="width:180px" clearable />
        </el-form-item>
        <el-form-item label="纬度">
            <el-input v-model="center.lat" placeholder="纬度" style="width:180px" clearable />
        </el-form-item>
        <el-form-item label="缩放比例">
            <el-input v-model="center.zoom" placeholder="缩放比例" style="width:40px" disabled />
            <el-slider v-model="center.zoom" :min="1" :max="19" style="width:200px;" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="setPosition">八维昌平</el-button>
        </el-form-item>
    </el-form>
    <div class="map-grid">
        <baidu-map class="map" ak="V8uteq7S0qdBroEtotby8BdRG9WTm5FH" v="3.0" type="API" :center="center"
            :zoom="center.zoom" :scroll-wheel-zoom="true" @moving="syncCenterAndZoom" @moveend="syncCenterAndZoom"
            @zoomend="syncCenterAndZoom">
        </baidu-map>
    </div>

</template>

<script setup lang="ts">
import { ref, reactive, nextTick } from "vue"

import { BaiduMap } from 'vue-baidu-map-3x'
const center = reactive({
    lng: 116.13445220285769,
    lat: 40.23762683919179,
    zoom: 17
})
const setPosition = () => {
    center.lng = 116.13445220285769;
    center.lat = 40.23762683919179;
    center.zoom = 17
}
const syncCenterAndZoom = (e) => {
    const { lng, lat } = e.target.getCenter();
    center.zoom = e.target.getZoom();
    nextTick(() => {
        center.lng = lng;
        center.lat = lat;
    })
}
</script>
<style>
.map {
    width: 100%;
    height: 100%;
}

.map-grid {
    width: 95%;
    height: 500px;
    margin: 10px auto;
    border: solid 1px #2b2727;
}
</style>